<!--职业竞赛-竞赛管理-->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>职业竞赛</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
      <span>赛事名称：<el-input size="small" style="width: 200px;" placeholder="请输入" /></span>
      <el-form-item label="状态：">
        <el-select size="small" v-model="parentcode" placeholder="请选择" @change="search">
          <el-option label="全部" value="ALL"></el-option>
          <el-option label="未发布" value="FEIZHI"></el-option>
          <el-option label="已发布-预热中" value="JIUYI"></el-option>
          <el-option label="已发布-进行中" value="JINSHU"></el-option>
          <el-option label="已发布-已结束" value="SULIAO"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="操作">
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-search" @click="clan">重置</el-button>
<!--        <el-button size="small" type="primary" icon="el-icon-search" @click="orderDetails">详情</el-button>-->
      </el-form-item>
      <br>
      <div class="addBut">
        <el-button size="small" type="primary" icon="el-icon-add"  @click="itemAdd('add')">+添加职业竞赛</el-button>
      </div>

    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="formInline" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" sortable prop="bjs_logo_uri" label="封面" width="150">
        <template #default="scope">
          <el-image
            style="width: 80px; height: 50px"
            :src="scope.row.bjs_logo_uri[0].url"
            :preview-src-list="[scope.row.bjs_logo_uri[0].url]"
            fit="cover"
          >
            <template #error>
              <div class="image-error">加载失败</div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="bjs_name" label="赛事名称" width="250">
      </el-table-column>
      <el-table-column align="center" sortable prop="bjs_startdate" label="开赛时间" width="250">
      </el-table-column>
      <el-table-column align="center" sortable prop="csrs" label="参赛人数" width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="bjs_publishstate" label="发布状态" width="200">
        <template v-slot="scope">
          {{ scope.row.bjs_publishstate === 0 ? '未发布' : scope.row.bjs_publishstate === 1 ? '已发布' : scope.row.bjs_publishstate }}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="item_unit" label="赛事状态" width="200">
        <template v-slot="scope">
<!--          战态，d预热中，1进行中，2已经结束-->
          {{ scope.row.bjs_state === 0 ? '预热中' : scope.row.bjs_state === 1 ? '进行中' : '已结束' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template v-slot="scope">
          <!--          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">发布</el-button>-->
          <el-button size="mini" v-if="scope.row.bjs_publishstate === 0" @click="publicJs(scope.$index, scope.row)">发布</el-button>
          <el-button size="mini" v-else @click="unpublicJs(scope.$index, scope.row)">下架</el-button>
          <el-button size="mini" @click="persionJs(scope.$index, scope.row)">参赛者</el-button>
          <el-button size="mini" @click="editJs(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteJs(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>

<script>
// 导入请求方法
import {  userDelete } from '../../api/userMG'
import { selectDetail, saveClassify, saveAddClassify, deleteClassify } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
import {deletebjs, publishbjs, querybjslist, updatebjs} from "../../api/InstitutionApi";
export default {
  data() {
    return {
      parentcode:'', ////状态选择
      formInline: [{
        bjsname: '',
        bjsstartdate: '', ///开赛时间
        bjsperson: '', ////参赛人数
        bjspublishstate: '', ///发布状态
      }],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      // 选择数据
      selectdata: [],

      // 数据权限
      UserDept: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    // 获取竞赛
    this.selectJsList()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取竞赛列表
    selectJsList(){
      querybjslist().then(res => {
        this.formInline = []
        this.formInline = res.data.base_info
        console.log('竞赛列表-1：', this.formInline)

      })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    //搜索事件
    search() {
      // console.log('item-formInline:',this.formInline.parentcode)
      this.getdata(this.formInline.parentcode)

    },
    clan() {

    },
    // 添加新竞赛
    itemAdd() {
      // 跳转页面的三种方式
      // 方式1：通过 path 跳转
      // this.$router.push({
      //   path: `/enterprises/EnEdit/:index`
      // });
      // 方式2：通过 name 跳转（推荐）
      // this.$router.push({
      //   name: 'enedit',
      //   params: { index: index }
      // });
      // 方式3：带查询参数（显示在URL中）
      this.$router.push({
        path: '/pro/proDetails',
        query: ''
      });
    },

    // 跳转
    orderDetails() {
      // 跳转页面的三种方式
      // 方式1：通过 path 跳转
      // this.$router.push({
      //   path: `/enterprises/EnEdit/:index`
      // });
      // 方式2：通过 name 跳转（推荐）
      // this.$router.push({
      //   name: 'enedit',
      //   params: { index: index }
      // });
      // 方式3：带查询参数（显示在URL中）
      this.$router.push({
        path: '/pro/proDetails',
        query: ''
      });
    },
    // 发布
    publicJs(index,row) {
      publishbjs({
        "bjscode": row.bjs_code, //#竞赛code
        "bjspublishstate": "1" //#发布状态, 0下架，1发布
      }).then(res => {
        console.log('public:', res)
        this.selectJsList()
      })

    },
    // 下架
    unpublicJs(index,row) {
      publishbjs({
        "bjscode": row.bjs_code, //#竞赛code
        "bjspublishstate": "0" //#发布状态, 0下架，1发布
      }).then(res => {
        console.log('public:', res)
        this.selectJsList()
      })
    },

    // 参赛者
    persionJs(index,row) {
      this.$router.push({
        path: '/pro/proPerson',
        query: {jsrow: row}
      });
    },
    // 编辑竞赛
    editJs(index,row) {
      this.$router.push({
        path: '/pro/proDetails',
        query: {jsrow: row}
      });
    },
    deleteJs(index,row) {
      deletebjs({
        "bjscode": row.bjs_code,
      }).then(res => {
        console.log('删除', res)
        this.selectJsList()

      })

    },
    // 跳转到新课程表
    courserTable() {
      this.$router.push({
        path: '/onlineCourse/courseTable',
        query: ''
      });
    },
    // // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },

  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.addBut {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

</style>



